<template>
  <div class="keywordbox from-ipt-width">
    <el-tag
      v-for="(item, index) in labelarr"
      :key="index"
      type="success"
      closable
      class="mr5"
      :disable-transitions="false"
      @close="labelhandleClose(item)"
      >{{ item }}
    </el-tag>
    <el-input
      v-model.trim="val"
      size="small"
      class="keywordbox_ip"
      placeholder="输入后回车"
      style="width: 23%"
      @change="addlabel"
      :disabled="isDisabled"
    />
  </div>
</template>

<script>

export default {
  name: 'keyword',
  props: {
    isDisabled: {
      type: Boolean,
      default: function () {
        return false;
      },
    },
    labelarr: {
      type: Array,
      default: function () {
        return [];
      },
    },
    type: {
      type: String,
      default: function () {
        return 'text';
      },
    },
  },
  data() {
    return {
      val: '',
    };
  },
  methods: {
    labelhandleClose(tag) {
      const index = this.labelarr.indexOf(tag);
      this.labelarr.splice(index, 1);
    },
    addlabel() {
      const count = this.labelarr.indexOf(this.val);
      if (count === -1) {
        this.labelarr.push(this.val);
      }
      this.val = '';
      this.$emit('getLabelarr', this.labelarr);
    },
  },
};
</script>

<style scoped>
.keywordbox {
  background-color: white;
  font-size: 12px;
  border: 1px solid #dcdee2;
  border-radius: 6px;
  margin-bottom: 0px;
  padding: 0 5px;
  text-align: left;
  box-sizing: border-box;
}
</style>
